<template>
	<view class='bg'>
		<!-- 背景图片 -->
		<view class="bg-image">
			 <image src="../../../static/img/bg.jpg" style="width: 100%;height: 100%;"></image> 
		</view>
		<view class="top">
			<!-- 跑马灯 -->
			<view class='notice' v-if="noticeStr" >
				<view class="marquee">{{this.noticeStr}}</view>
				<view class="noticeBlock" @click="goToMessage" ></view>
			</view>
			<!-- 卡号查询 -->
			<view class="search">
				<input class="uni-input search-input" confirm-type="search" placeholder="搜索: 请输入卡号/iccid" :value='cardNo' @confirm='confirmTap' @input='getCardNo'	/>
				<view type="primary" class="search-button" @click='confirmTap'>搜索</view>
				<!-- 清除卡号 -->
				<img src="../../../static/img/clear.svg" class="img-clear" @click="cardNo=''"/>
			</view>
		</view>
		<!-- 卡板列表 -->
		<view :class="['uni-padding-wrap','data',noticeStr?'data-top-notice':'data-top']" >
			<view class="data-item" v-for="(item,index) in cardList" :key="item.id" :animation="item.animationData" >
				<view class="displayBg" v-show="item.showDisabledBlock" ></view>
				<!-- LOGO && 卡号 -->
				<view class="data-item-top">
					<view class="data-item-top-logo" :style="{'background-image': 'url('+item.logo+')','height':item.dicType=='CARD' || (item.dicType=='DONGLE' && item.logoType=='FLOW_CARD_LOGO')?'70%':'90%'}"></view>
					<view class="data-item-top-card">
						<view class="data-item-card">{{item.cardNumber}}</view>
						<view class="btn-flow" @click="searchCardFlow(item)" v-show="!item.showFlow&&item.dictChangeCardFlag!='BECHANGED'">查询流量</view>
						<view class="btn-flow-close" @click="item.showFlow=false" v-show="item.showFlow&&item.dictChangeCardFlag!='BECHANGED'">关闭窗口</view>
					</view>
				</view>
				<!-- 卡板流量数据 -->
				<view class="data-item-flow" v-show="item.showFlow">
					<view class="data-item-flow-status" v-show="item.realNameStatus||item.cardStatus">
						<view :class="['data-item-flow-status-model',item.realNameStatus?item.realNameBg:'']" >
							<text v-if='item.realNameStatus=="C_YES"'>已实名</text>
							<text v-if='item.realNameStatus=="C_NO"'>未实名</text>
						</view>
						<view :class="['data-item-flow-status-model',item.cardStatus?item.cardStatusBg:'']" v-show="item.cardStatus" >{{item.cardStatus}}</view>
					</view>
					<!-- 进度条 -->
					<view class="data-item-flow-porcess" v-if="item.dictChangeCardFlag!='BECHANGED'"><view class="data-item-flow-porcess-num" :style="{'width': item.percentage+'%'}"></view></view>
					<!-- 流量数据 -->
					<view class="data-item-flow-block">
						<view class="data-item-flow-block-item">
							<view class="data-item-flow-block-item-chi">{{item.allFlow}}</view>
							<view class="data-item-flow-block-item-chi">总量</view>
						</view>
						<view class="data-item-flow-block-item">
							<view class="data-item-flow-block-item-chi">{{item.usedFlow}}</view>
							<view class="data-item-flow-block-item-chi">已用</view>
						</view>
						<view class="data-item-flow-block-item">
							<view class="data-item-flow-block-item-chi">{{item.surplusFlow}}</view>
							<view class="data-item-flow-block-item-chi">剩余</view>
						</view>
						<view class="data-item-flow-block-item">
							<view class="data-item-flow-block-item-chi">{{item.balance}}<text v-show='item.balance!="--"'> 元</text></view>
							<view class="data-item-flow-block-item-chi">余额</view>
						</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="data-item-remark" v-if="item.dictChangeCardFlag!='BECHANGED'"><span>备注：{{item.remark}}</span></view>
				<!-- 换卡备注 -->
				<view class="data-item-note" v-if="item.dictChangeCardFlag=='BECHANGED'"  @click="dialogReason(item.note)">换卡原因：{{item.note}}</view>
				<!-- 按钮 -->
				<view class="data-item-btns">
					<view class="data-item-btn" v-if="item.balanceHeadId&&item.dictChangeCardFlag!='BECHANGED'" @click="goToRechargeBalance(item)">预存余额</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag!='BECHANGED'" @click="copy(item)">复制卡号</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag!='BECHANGED'" @click="goToRechargeSetmeal(item)">订购套餐</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag=='BECHANGED'" @click="gotoChangeLog(item)">换卡记录</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag=='BECHANGED'" @click="changeNewCard(item)">填写新卡</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag=='BECHANGED'" @click="gotoChangeCardPage(item)">填写地址</view>
					<view class="data-item-btn" v-if="item.dictChangeCardFlag!='BECHANGED'" @click="gotoDetail(item)">查看详情</view>
				</view>
			</view>
			<!-- 添加卡 -->
			<view class="add-card" @click="gotoAddCard"><text class="iconfont icon-jiahao" style="margin: 0 5% 0 10%;"></text>添加卡</view>			
		</view>
		<!-- 复制卡号弹窗 -->
		<view class='copy_dialog' v-show='showCopyDialog' @click="showCopyDialog=false">
			<view class='copy_bord'>
				<view class='copy_btn_primary' @click="copyCard(copy_card_id)">复制卡号</view>
				<view class='copy_btn_primary' @click="copyCard(copy_card_iccid)" v-show="dicType!=='DONGLE'">复制iccid</view>
				<view class='copy_btn_primary' @click="copyCard(realNameCard)" v-show="realNameCard">复制实名卡号</view>
				<view class='copy_btn_primary' @click="cardRealName(realNameUrl)" v-show="realNameUrl">跳转实名</view>
			</view>
		</view>
		<view class='copy_dialog' v-show='showReasonDialogFlag' @click="showReasonDialogFlag=false">
			
			<view class='copy_bord' style="padding-left: 20px;padding-right: 20px;">
				<view style="border-bottom: black solid;">
					<text style="">换卡原因</text>
					<text @click="showReasonDialogFlag = false" style="position: absolute;right: 40px;"><i class="iconfont icon-shanchu close">关闭</i></text>
				</view>
				<view  style="word-wrap: break-word;width: 100%;margin-top: 20px;">{{reasonTxt}}</view>
				
			</view>
		</view>
		<!-- 添加新卡弹窗 dialog-bg -->
		<view class="copy_dialog" v-if="showCardDialog">
			<view class="dialog-remark">
				<view class="dialog-remark-top">
					<text>添加新卡</text>
					<text @click="showCardDialog = false"><i class="iconfont icon-shanchu close">关闭</i></text>
				</view>
				<view class="dialog-remark-body">
					<view><input v-model="newCard" class="uni-input input-style" focus placeholder="请输入卡号/ICCID" maxlength="25" @input="getNewCard"/></view>
					<view class="dialog-remark-tip">提示：*请输入正确的替换卡，输错5次后将不能再替换新卡。</view>
				</view>
				<button class="div-dialog-btn" @click="saveNewCard" :disabled="disabled">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeStr: '',			//跑马灯文字
				cardNo: '',				//搜索卡号
				cardList: [],			//卡号列表
				page: {
					size: 10,
					current: 1,
				},						//分页
				timerList: [],			//列表刷新蒙版
				showCopyDialog: false,	//复制dialog
				showCardDialog: false,	//复制dialog
				showReasonDialogFlag: false, //弹窗原因
				copy_card_id: '',
				copy_card_iccid: '',
				realNameCard: '',
				realNameUrl: '',
				dicType: '',
				reasonTxt:''
			}
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			uni.showModal({
				content:this.page.current
			})
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.cardList = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.getNotice();
			this.initData();
		},
		methods: {
		
			//清空查询卡号
			clearCardNo(){
				this.cardNo = "";
				this.page = {
					size: 10,
					current: 1
				}
				this.cardList = []
				this.initData();
			},
			//搜索
			searchCard(){
				this.cardNo = event.target.value;
				this.page = {
					size: 10,
					current: 1
				}
				this.cardList = []
				this.initData();
			},
			//输入卡号input
			getCardNo(){
				this.cardNo = event.target.value
			},
			//执行搜索
			confirmTap(){
				this.cardList = []
				this.page = {
					size: 10,
					current: 1
				}
				this.initData();
			},	
			//获取头部跑马灯通知消息
			getNotice(){
				this.$req.crm("notice/list", {
					dictNoticeType: "C",
					page: {
						size: 3,
						current: 1
					}
				}).then(v => {
					this.noticeStr = '';
					if(v.data.records){
						v.data.records.map(t => {
							this.noticeStr += t.title
						})
					}					
				})
			},
			//获取卡板列表数据
			initData(){
				this.$req.userData('card-customer/listUserCard', {
					page: this.page,
					cardNumber: this.cardNo
				}).then(res => {
					if(this.page.current==1){
						this.cardList = [];
					}
					if(res.code==10000&&res.data.records){
						res.data.records.forEach((item, index)=>{
							let obj = {};
							obj.cardId = item.cardId;
							obj.cardNumber = item.cardNumber;
							obj.iccid = item.iccid;
							obj.dicType = item.dicType?item.dicType:'CARD';     //单卡 or 设备
							obj.dictOperator = item.dictOperator;//运营商
							obj.dictCardOperatorName = item.dictCardOperatorName;//运营商名称
							obj.logoType = item.dictDisplayLogoType?item.dictDisplayLogoType:'';//设备logo类型
							obj.logo = '';							//logo图片地址
							// obj.icon = '';							//icon
							if(obj.dicType=='CARD' || (obj.dicType=='DONGLE' && obj.logoType=='FLOW_CARD_LOGO')){//卡体类型为CARD 或者 卡体类型为设备，但是logo跟随运营商卡板
								if(obj.dictCardOperatorName=='联通'){
									obj.logo = '../../../static/img/liantong.svg';
								}
								else if(obj.dictCardOperatorName=='移动'){
									obj.logo = '../../../static/img/yidong.svg';
								}
								else if(obj.dictCardOperatorName=='电信'){
									obj.logo = '../../../static/img/dianxin.svg';
								}else if(obj.dictCardOperatorName=='广电'){
									obj.logo = '../../../static/img/guangdian.png'
								}
							}
							if(obj.dicType=='DONGLE'){
								if(obj.logoType=='DISPLAY_NONE_LOG'){//强制不显示
									obj.logo = '';
								}
								else if(obj.logoType=='SPECIAL_LOGO'){//上传特殊logo
									obj.logo = item.picture?item.picture:'';
								}
							}
							obj.showFlow = false;					//是否展开流量详情
							obj.loading = false;					//获取流量数据中
							obj.showDisabledBlock = false;			//换卡蒙版
							obj.dictChangeCardFlag = '';			//换卡标识
							obj.btnOp = 0.1;						//蒙版
							obj.remark = item.remark;				//备注
							obj.cardStatus = '';					//卡状态
							obj.realNameStatus = '';				//卡实名状态
							obj.realNameUrl = '';					//跳转实名链接
							obj.realNameCard = '';					//设备实名卡号
							obj.realNameBg = '';					//实名标签背景
							obj.cardStatusBg = '';					//卡状态标签背景
							obj.balanceHeadId = item.balanceHeadId;//是否含有余额套餐
							obj.allFlow = '0MB';					//流量：总量
							obj.usedFlow = '0MB';					//流量：用量
							obj.surplusFlow = '0MB';				//流量：剩余
							obj.balance = item.balance?item.balance:'--';//余额
							obj.percentage = 10;		//流量用量百分比
							obj.expirationDate = '';//到期时间
							this.cardList.push(obj);
							//this.getCardStatus(obj);
							this.settime(item,index)
						})
						
					}
				})
			},
			// 获取实名卡号  实名状态  实名链接
			async getCardStatus(obj){
				let res=await this.$req.userData('/card/getCardData', {
					id: obj.cardId
				})
					if(res.data){
						let item = res.data
						obj.loading = false;					//获取流量数据中
						obj.dictChangeCardFlag = item.dictChangeCardFlag;//换卡标识
						obj.note = item.note;					//换卡原因
						obj.btnOp = 0.1;						//蒙版
						obj.cardStatus = item.dictChannelCardStatusName?item.dictChannelCardStatusName:'';					//卡状态
						if(item.dictChannelCardStatus=='STATUS_NONE')obj.cardStatus = "状态未知";
						if(item.dictChannelCardStatus=='ACTIVATE'){
							obj.cardStatusBg = 'data-item-flow-status-success'
						}
						else if(item.dictChannelCardStatus=='DEACTIVATED'){
							obj.cardStatusBg = 'data-item-flow-status-warning'
						}
						else if(item.dictChannelCardStatus=='REACTIVATE'){
							obj.cardStatusBg = 'data-item-flow-status-primary'
						}
						else if(item.dictChannelCardStatus=='PAUSE'){
							obj.cardStatusBg = 'data-item-flow-status-danger'
						}
						else if(item.dictChannelCardStatus=='TERMINATED'){
							obj.cardStatusBg = 'div-item-flow-status-chaiji'
						}else if(item.dictChannelCardStatus=='STATUS_NONE'||item.dictChannelCardStatus==''){
							obj.cardStatusBg = 'data-item-flow-status-info'
						}
						obj.balanceHeadId = item.balanceHeadId; //是否含有余额套餐
						obj.allFlow = item.totalMb == null ? '0MB' : this.$toGB.exe(item.totalMb);		//流量：总量
						obj.usedFlow = item.usedFlow == null ? '0MB' : this.$toGB.exe(item.usedFlow);	//流量：用量
						obj.surplusFlow = item.residue == null ? '0MB' : this.$toGB.exe(item.residue);	//流量：剩余
						obj.expirationDate = item.expirationDate;//到期时间
						obj.percentage = null;					 //流量用量百分比
						if (obj.allFlow === '0MB') {
							obj.percentage = 0;
						} else {
							//剩余百分比
							let p = item.percentage == null ? 0 : item.percentage
							//用1-减去 等于 已用百分比
							obj.percentage = 100 - p
						}
						// 实名状态  实名链接   
						obj.realNameStatus = item.dictUpCompanyRealName?item.dictUpCompanyRealName:'';	//卡实名状态
						obj.realNameCard = item.realNameCard?item.realNameCard:'';		//设备实名卡号
						obj.realNameBg = obj.realNameStatus=='C_YES'?'data-item-flow-status-success':'data-item-flow-status-danger';//实名标签背景
						obj.showDisabledBlock = item.dictChangeCardFlag == 'BECHANGED'?true:false;
						this.realNameUrl=null
						//realNameCard: '',
				//realNameUrl: '',
						if(obj.realNameStatus=='C_NO'){
							
							this.$req.userRecharge("customer-order/realNameCheck", {
								id: obj.cardId
							}).then(respon => {
								
								if(respon.data){
									
									// obj.realNameStatus = respon.data.realNameStatus?respon.data.realNameStatus:'';	//卡实名状态
									obj.realNameUrl = respon.data.realNameUrl?respon.data.realNameUrl:'';			//跳转实名链接
									this.realNameUrl = obj.realNameUrl
									// obj.realNameCard = respon.data.realNameCard?respon.data.realNameCard:'';		//设备实名卡号
									// obj.realNameBg = obj.realNameStatus=='C_YES'?'data-item-flow-status-success':'data-item-flow-status-danger';//实名标签背景
									
								}
							})
						}
					}
			},
			settime(card, index) {
				let timer = setTimeout(() => {
					// if (card.dictChangeCardFlag == 'BECHANGE') {
					// 	card.showDisabledBlock = true
					// }
					card.btnOp = 1
				}, 150 * index)
				this.timerList.push(timer)
			},
			//获取流量数据 及 卡板详情
			async searchCardFlow(obj){
				obj.showFlow = true;
				this.getCardStatus(obj);
			},
			//跳转至预存余额
			goToRechargeBalance(card) {
				let logo = '';
				if(card.dicType=='DONGLE'&&card.logoType=='DISPLAY_NONE_LOG'){//强制不显示
					logo = 'none';
				}
				if(card.dicType=='DONGLE'&&card.logoType=='SPECIAL_LOGO'){//上传特殊logo
					logo = card.logo?'own':'none';
					if(card.logo){
						uni.setStorage({
							key: 'logo',
							data: card.logo
						})
					}
				}
				uni.navigateTo({
					url: '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber+ "&operatorName=" + card.dictCardOperatorName + '&logo='+logo
				});
			},
			//跳转至订购套餐
			goToRechargeSetmeal(card) {
				let uri= '/pages/tabbar/recharge/bookPackage?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber + "&operatorName=" + card.dictCardOperatorName + "&time=" + card.expirationDate
				uni.navigateTo({
					url: uri
				});
			},	
			//跳转至卡详情
			gotoDetail(card) {
				let u = ""
				if (card.expirationDate != null) {
					u = "&time=" + card.expirationDate
				}
				let uri = '/pages/cardController/newIndex?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber + u + "&operatorName=" + card.dictCardOperatorName
				uni.navigateTo({
					url: uri
				});
			},
			//跳转至添加卡
			gotoAddCard() {
				uni.switchTab({
					url: '/pages/tabbar/cardList/bindCard'
				});
			},
			//跳转至换卡记录
			gotoChangeLog(item) {
				uni.setStorage({
					key: 'cardId',
					data: item.cardId
				})
				uni.setStorage({
					key: 'cardNumber',
					data: item.cardNumber
				})
				uni.setStorage({
					key: 'tab',
					data: 'change'
				})
				uni.switchTab({
					url: '/pages/tabbar/order/orderList'
				})
			},
			//跳转至换卡页面
			gotoChangeCardPage(card) {
				uni.navigateTo({
					url: '/pages/changeCard/changeCard?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber
				});
			},
			//填写新卡
			async changeNewCard(item){
				this.showCardDialog = true;
				this.newCard = '';
				this.disabled = false;
				this.operatorNumber = item.iccid;
				this.pagekey = await this.$getPageKey();
			},
			getNewCard(e){
				this.newCard = e.detail.value;
			},
			async saveNewCard(){
				if (this.newCard == '') {
					this.$message('新卡卡号不能为空！')
					return
				}
				this.disabled = true;
				await this.$req.userData('card/changeCard/recheck', {
					operatorNumber: this.operatorNumber,
					newOperatorNumber: this.newCard,
					pagekey: this.pagekey
				}).then(v => {
					this.$message('更换成功!')
					this.cardList = []
					this.page = {
						size: 10,
						current: 1
					}
					this.initData();
					this.disabled = false;
				}).catch(err => {
					this.disabled = false;
				})
				this.showCardDialog = false;
			},
			//复制卡号
			async copy(row) {
		
				uni.showLoading({
				    title: '加载中'
				});
				await  this.getCardStatus(row);
				uni.hideLoading()
				console.log(row)
				this.copy_card_id = row.cardNumber;
				this.copy_card_iccid = row.iccid;
				this.realNameCard = row.realNameCard;
				//this.realNameUrl = row.realNameUrl;
				this.dicType = row.dicType
				console.log(this.realNameUrl)
				if (row.dictCardOperatorName == '联通') {
					this.copy_card_iccid = row.iccid.substring(0, 19);
				}
						this.showCopyDialog = true;
			},
			//复制卡号到剪贴板
			copyCard(message) {
				let that = this;
				this.$copyText(message).then(function(e) {
					that.$message('复制成功')
				}, function(e) {
					that.$message('复制失败')
				})
				this.showCopyDialog = false;
			},
			// 跳转实名
			cardRealName(url){
				window.location.href = url
			},
			//跳转至公告列表
			goToMessage() {
				uni.switchTab({
					url: '/pages/message/newIndex'
				})
			},
			dialogReason(reasonLog){
				//alert(1)
				this.reasonTxt = reasonLog
				this.showReasonDialogFlag = true
			}
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.bg-image{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.top{
		width: 100%;
		height: auto;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20upx 0;
		z-index: 100;
		background: rgba(126,166,227,1);
	}
	.notice{
		width: 100%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: 20upx;
		background-color: rgba(48, 111, 201, 0.5);
		z-index: 102;
	}
	.marquee{
		height: 60upx;
		color: #FFFFFF;
		white-space: nowrap;
		font-size: 20upx;
		line-height: 60upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		animation: dd 30s linear 0s infinite;
		-webkit-animation: dd 30s linear 0s infinite;
	}
	@keyframes dd {
		0% {
			text-indent: 27.5em;
		}
	
		100% {
			text-indent: -10em;
		}
	}
	.noticeBlock {
		position: absolute;
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		z-index: 100;
		top: 0;
		background-color: rgba(255, 255, 255, 0);
	}
	
	.search{
		width: 96%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 2%;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.search-input{
		width: 78%;
		height: 50upx !important;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 5px 0 0 5px;
		color: #333;
		padding: 10upx 20upx;
		display: inline-block;
		text-align: center;
		/* background-image: linear-gradient(to top, #D7D7D7 0%, #F4F4F4 50%, #FFFFFF 100%); */
		background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
	}
	.search-button{
		width: 22%;
		height: 68upx;
		position: relative;
		top: 0;
		left: 0;
		color: #FFFFFF;
		border-radius: 0 5px 5px 0;
		display: inline-block;
		border: none;
		outline: none;
		line-height: 68upx;
		font-size: 28upx;
		text-align: center;
		letter-spacing: 1px;
		text-shadow: 1px 1px 0 #999;
		background-image: linear-gradient(to top, #639AF2 0%, #8CB8FF 100%);
	}
	.img-clear{
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 10upx;
		left: 67%;
		z-index: 100;
	}
	.data{
		width: 100%;
		position: absolute;
		left: 0;
		overflow-y: scroll;
		z-index: 100;
		padding-bottom: 240upx;
		display: flex;
		flex-direction: column;
		z-index: 50;
		background-color: none;
	}
	.data-top-notice{
		top: 190upx;
	}
	.data-top{
		top: 110upx;
	}
	.data-item{
		width: 96%;
		height: auto;
		position: relative;
		top: 0;
		left: 2%;
		margin-bottom: 10px;
		background-image: linear-gradient(120deg, rgba(253, 251, 251,0.5) 0%, rgba(235, 237, 238,0.5) 100%);
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		flex-shrink:0;
		overflow: hidden;
	}
	.data-item-top{
		width: calc(100% - 20upx);
		height: 80upx;
		padding: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10upx;
	}
	.data-item-top-logo{
		width: 22%;
		height: 90%;
		display: inline-flex;
		justify-content: start;
		align-items: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center; 
	}
	.img-logo{
		max-width: 20vw;
		max-height: 100%;
	}
	.data-item-top-card{
		flex:1;
		width: 72%;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		align-items: center;
	}
	.data-item-card{
		font-size: 17px;
		color: #FFFDEF;
		font-weight: bold;
	}
	.btn-flow{
		width: auto;
		height: 25px;
		/* background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%); */
		background-image: linear-gradient(60deg, #408CFF 0%, #A0C6FF 100%);
		margin-left: 10upx;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 10px;
		color: #FFF;
		font-size: 10px;
		line-height: 25px;
	}
	.btn-flow-close{
		width: auto;
		height: 25px;
		background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
		margin-left: 10upx;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 10px;
		color: #888;
		font-size: 10px;
		line-height: 25px;
	}
	/* 卡备注 */
	.data-item-remark{
		width: 94%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 3%;
		font-size: 12px;
		color: #888;
		line-height: 20px;
		word-wrap: break-word;
	}
	/* 卡流量 + 卡板状态 + 实名状态 */
	.data-item-flow{
		width: calc(100% - 20upx);
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 10upx;
		
	}
	/* 卡状态 */
	.data-item-flow-status{
		width: 100%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	.data-item-flow-status-model{
		width: auto;
		height: 50upx;
		border-radius: 5px;
		font-size: 10px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0 12px;
		letter-spacing: 1px;
		color: #fff;
	}
	.data-item-flow-status-success{
		background-image: linear-gradient(-225deg, #3CB371 0%, #90EE90 100%);
	}
	.data-item-flow-status-warning{
		background-image: linear-gradient(-225deg, #FF6347 0%, #FFA07A 100%);
	}
	.data-item-flow-status-info{
		background-image: linear-gradient(-225deg, #808080 0%, #C0C0C0 100%);
	}
	.data-item-flow-status-primary{
		background-image: linear-gradient(-225deg, #AFC0F3 0%, #4169E1 100%);
	}
	.data-item-flow-status-danger{
		background-image: linear-gradient(-225deg, #991919 0%, #EC816E 100%);
	}
	.div-item-flow-status-chaiji{
		background-image: linear-gradient(-225deg, #F1A904 0%, #FDE09C 100%);
	}
	.data-item-flow-porcess{
		width: 100%;
		height: 10rpx;
		position: relative;
		top: 0;
		left: 0%;
		background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, rgba(224,224,224,0.3) 26%, rgba(242,242,242,0.3) 48%, rgba(251,251,251,0.3) 75%, rgba(181,181,181,0.3) 100%);
		border-radius: 20upx;
		margin: 10px 0;
		/* background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #1C74FD 26%, #4b7cc5 48%, #5B96F1 75%, #8FBBFC 100%); */
	}
	.data-item-flow-porcess-num{
		width: 100%;
		height: 10rpx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		opacity: 1;
		z-index: 10;
		border-radius: 10upx;
		background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #1C74FD 26%, #4b7cc5 48%, #5B96F1 75%, #8FBBFC 100%); 
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	
	/* 流量信息 */
	.data-item-flow-block {
		width: 100%;
		height: 80upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 5px;
		padding: 5px 0;
	}
	.data-item-flow-block-item{
		width: 23%;
		height: 100%;
		position: relative;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.data-item-flow-block-item-chi{
		width: 100%;
		height: 45%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 10px;
		color: #555;
		font-weight: 400;
	}
	/* 换卡备注 */
	.data-item-note{
		width: 94%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		font-size: 24upx;
		line-height: 40upx;
		color: #888888;
		margin: 10upx 3%;
		z-index: 100;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 这里是超出几行省略 */
		overflow: hidden;
	}
	/* 按钮行 */
	.data-item-btns{
		width: 100%;
		height: 50upx;
		position: relative;
		top: 0;
		left: 0;
		margin: 10upx 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 100;
	}
	.data-item-btn{
		width: auto;
		height: 46upx;
		position: relative;
		top: 0;
		right: 0;
		display: inline-block;
		line-height: 46upx;
		padding: 0 12px;
		color: #fff;
		font-size: 10px;
		font-weight: 400;
		background-image: linear-gradient(60deg, #408CFF 0%, #A0C6FF 100%);
		/* background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%); */
		border-radius: 5px;
		margin-right: 5px;
	}
	/* 蒙版 */
	.displayBg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to bottom, #a1c4fd 0%, #c2e9fb 100%);
		opacity: 0.8;
		z-index: 20;
	}
	/* 添加卡 */
	.add-card{
		width: 96%;
		height: 100upx;
		position: relative;
		top: 20upx;
		left: 2%;
		/* background-image: linear-gradient(to top, #2A73E9 0%, #ABCAFC 100%); */
		/* background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%); */
		/* background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%); */
		background-image: linear-gradient(60deg, #408CFF 0%, #A0C6FF 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 5px;
		line-height: 100upx;
		margin-bottom: 50px;
		color: #007AFF;
		letter-spacing: 3px;
		font-size: 20px;
		color: rgba(251,251,251,.9);
	}
	/* 弹窗 复制卡号 */
	.copy_dialog {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}
	
	.copy_bord {
		width: 80vw;
		height: auto;
		padding: 5vw 1vw;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: -20%;
		background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	
	.copy_btn_primary {
		width: 80%;
		height: 70upx;
		font-size: 14px;
		background-image: linear-gradient(to top, #408CFF 0%, #A0C6FF 100%);
		color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin: 10px 0;
		line-height: 70upx;
		text-align: center;
		letter-spacing: 3px;
		border-radius: 70upx 6upx 70upx 6upx;
	}
	/* -----------------修改备注弹窗------------ */
	.dialog-bg{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 125;
	}
	.dialog-remark{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 50px;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		border-radius: 4px 4px 0 0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding-bottom: 60upx;
	}
	.dialog-remark-top{
		width: 96%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 2%;
		border-bottom: 1px solid #e6e6e6;
		color: #333;
		font-size: 28upx;
	}
	.close{
		color: #999;
		font-size: 28upx;
	}
	.dialog-remark-body{
		width: 96%;
		height: auto;
		position: relative;
		top: 0;
		left: 2%;
		
	}
	.input-style{
		width: 84% ;
		height: 60upx ;
		position: relative;
		top: 0;
		left: 0;
		border: 1px solid #007AFF;
		background-color: rgba(255,255,255,0);
		border-radius: 4px;
		margin: 10px 5% 0 5%;
	}
	.dialog-remark-tip{
		width: 90%;
		height: 70upx;
		position: relative;
		left: 5%;
		line-height: 70upx;
		font-size: 28upx;
		color: #999;
		
	}
	.div-dialog-btn{
		width: 90%;
		height: 70upx;
		position: relative;
		margin:10px 5% 20px 5%;
		line-height: 70upx;
		background: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		color: #fff;
		letter-spacing: 3px;
		font-size: 28upx;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
